<template>
    <div style="margin: 0px auto;width: 50%;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
        <el-form ref="userForm" :model="userForm" status-icon label-position="left" style='width: 400px;margin: 0px auto;margin-top: 8%;padding-top: 26px;'>
            <h1 style="margin: 1px 23% 25px;color:red;">爱币兑换积分</h1>
            <el-form-item label="用户名" prop="username" label-width="100px">
                <el-input v-model="userForm.username" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile" label-width="100px">
                <el-input v-model="userForm.mobile" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="爱币余额" prop="balance" label-width="100px">
                <el-input v-model="userForm.balance" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="积分余额" prop="integral" label-width="100px">
                <el-input v-model="userForm.integral" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="请输入要兑换为积分的爱币数量" prop="exchangeNum" :readonly="true">
                <el-input v-model="userForm.exchangeNum"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin: 0px auto;width: 30%;padding-bottom: 10px;">
            <!-- <el-button @click="dialogFormVisibles = false">返回</el-button> -->
            <el-button type="primary" @click="exchangeData" style="margin: 0px auto;width: 100%;">兑换</el-button>
        </div>
    </div>
</template>
<script>
import { listMechanism, listUserData, updateBalance } from '@/api/mechanism'
import store from '@/store'
import { listSubRegion } from '@/api/region'

export default {
  name: 'balanceToIntegral',
  data() {
    return {
      userForm: {
        username: undefined,
        mobile: undefined,
        integral: undefined,
        balance: undefined,
        exchangeNum: undefined
      },
      instituteForm: {
        name: undefined,
        nickName: undefined,
        mechanismType: undefined,
        address: undefined,
        legalPerson: undefined,
        telephone: undefined,
        startTime: undefined,
        endTime: undefined,
        qualifications: undefined,
        provinceId: undefined,
        cityId: undefined,
        areaId: undefined,
        province: undefined,
        city: undefined,
        area: undefined
      },
      queryId: {
        queryId: ''
      },
      regionsId: {
        id: 0
      }
    }
  },
  created() {
    // this.downValues()
    // this.getProvinces()
    this.getValue()
  },
  methods: {
    downValues() {
      this.queryId.queryId = store.getters.mechanismId
      console.log(this.queryId)
      listMechanism(this.queryId).then(response => {
        console.log(response.data.data.mdList)
        this.instituteForm = response.data.data.mdList
      })
      console.log(this.instituteForm)
    },
    getProvinces() {
      listSubRegion(this.regionsId).then(response => {
        this.provinces = response.data.data
      })
    },
    getValue() {
      this.resetForm()
      console.log(this.instituteForm.telephone)
      this.queryId.queryId = store.getters.mechanismId
      listUserData({ queryId: this.queryId.queryId }).then(response => {
        if (response.data.data == null) {
          this.$alert('当前机构手机号没有注册或绑定用户', '提示', {
            confirmButtonText: '确定'
          })
          this.dialogFormVisibles = false
        } else {
          this.userForm = response.data.data
        }
      })
    },
    resetForm() {
      this.userForm = {
        username: undefined,
        mobile: undefined,
        integral: undefined,
        balance: undefined,
        exchangeNum: undefined
      }
    },
    createRecordSn() {
      var date = new Date()
      var Y = date.getFullYear()
      var M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      var ss = date.getMilliseconds()
      if (ss < 10) {
        ss = '00' + ss
      } else if (ss < 100) {
        ss = '0' + ss
      }
      // var result = Y.to + M + D + h + m + s + ss;
      var result =
        Y.toString() + M.toString() + D.toString() + h.toString() + m.toString() + s.toString() + ss.toString()
      console.log('result = ' + result)
      return result
    },
    exchangeData() {
      this.$confirm('爱币可以兑换积分，积分不可以兑换爱币, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (!/^[0-9]*$/.test(this.userForm.exchangeNum)) {
            this.$alert('请输入数字', '提示', {
              confirmButtonText: '确定'
            })
            this.userForm.exchangeNum = undefined
          } else if (this.userForm.exchangeNum > this.userForm.balance) {
            this.$alert('爱币余额不足', '提示', {
              confirmButtonText: '确定'
            })
          } else if (/^[0]*$/.test(this.userForm.exchangeNum)) {
            this.$alert('不能输入0爱币', '提示', {
              confirmButtonText: '确定'
            })
            this.userForm.exchangeNum = undefined
          } else if (this.userForm.username === undefined) {
            this.$alert('当前机构手机号没有注册或绑定用户', '提示', {
              confirmButtonText: '确定'
            })
            this.userForm.exchangeNum = undefined
          } else {
            updateBalance({
              exchangeNum: this.userForm.exchangeNum,
              mobile: this.userForm.mobile,
              recordSn: this.createRecordSn()
            }).then(response => {
              this.userForm = response.data.data
            })
            this.$message({
              type: 'success',
              message: '兑换成功!'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消兑换'
          })
        })
    }
  }
}
</script>

